<template>
  <div class="pc-holder-info">
    <div class="select-box">
      <span>{{holderInfo.symbol}}{{$t('rank.title')}}</span>
      <i class="iconfont iconshaixuan"></i>
      <label>{{$t('rank.range')}}</label>
      <el-select
        v-model="num"
        placeholder="please choose"
        size="mini"
        class="holder-range"
        @change="selectRange"
      >
        <el-option :label="`${$t('rank.best')} 10`" :value="10"></el-option>
        <el-option :label="`${$t('rank.best')} 20`" :value="20"></el-option>
        <el-option :label="`${$t('rank.best')} 30`" :value="30"></el-option>
      </el-select>
    </div>
    <div class="chart-container table-shadow">
      <div class="head flex-center">
        <span class="flex-left">
          <i class="iconfont iconyonghu"></i>
          {{$t('rank.topHolder',[num,(holdTotal*100/holderInfo.total).toFixed(8).slice(0,-6)+'%',token])}}
        </span>
        <span class="flex-left">
          <i class="iconfont iconjiangzhang"></i>
          {{$t('rank.totalTip')}}：{{(holderInfo.total/100000000)|filterNum}} {{$t('rank.token')}} 丨 {{$t('rank.holderTip')}}：{{holderInfo.holders}}
        </span>
      </div>
      <div class="hold-chart" id="myChart"></div>
      <div
        class="tip"
      >{{$t('rank.ps',[num,filterNum((holdTotal/100000000).toFixed(4)),filterNum(holderInfo.total/100000000)])}}</div>
    </div>
  </div>
</template>

<script>
import HolderInfoBase from "@/mixins/Holder/holderInfo.js";
import { filterNum } from "@/utils/filters";
export default {
  mixins: [HolderInfoBase],
  methods: {
    filterNum(num) {
      return filterNum(num);
    }
  }
};
</script>

<style lang="scss" scoped>
.pc-holder-info {
  .select-box {
    margin-bottom: 10px;
    span {
      font-size: 16px;
      font-family: PingFangSC-Semibold;
      font-weight: 500;
      color: $black;
    }
    i {
      margin-left: 30px;
      color: $grey_deep;
    }
    label {
      margin: 0 14px 0 10px;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: $black;
    }
    .holder-range {
      width: 105px;
    }
  }
  .chart-container {
    height: 426px;
    background: $white;
    border-radius: 2px;
    border: 1px solid rgba(235, 239, 241, 1);
    .head {
      height: 53px;
      border-bottom: 1px solid #eee;
      span {
        width: 50%;
        height: 100%;
        padding-left: 85px;
        color: $black;
        font-size: 14px;
        i {
          margin-right: 8px;
          color: #9aaab9;
          font-size: 18px;
        }
      }
      span:first-child {
        border-right: 1px solid #ebeff1;
      }
    }
    .hold-chart {
      height: 315px;
    }
    #holder-pie {
      height: 100%;
      width: 100%;
    }
    .tip {
      padding-left: 94px;
      line-height: 58px;
      font-size: 12px;
      font-weight: 400;
      color: $font_grey;
    }
  }
}
</style>
